<template>
  <!-- 二手房详情 -->
  <view class="box" @click="informationNoBubbles = false">
    <view
      class="headTop"
      :class="[clarity <= 0.2 ? 'anamorphism' : '']"
      :style="[
        { paddingTop: statusBarHeight1 + 'px' },
        { paddingBottom: clarity >= 0.9 ? '0' : '1px' },
        { borderBottom: clarity >= 0.9 ? '1px solid #eee' : 'none' },
        {
          backgroundColor:
            clarity <= 0.2 ? 'rgba(255,255,255,0)' : 'rgba(255,255,255,' + clarity + ')',
        },
      ]"
    >
      <!--  #ifdef APP-PLUS -->
      <image
        class="image1"
        v-if="clarity <= 0.2"
        @click="fanhui"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
        v-show="titIndex != 3"
      />
      <image
        class="image1"
        v-else
        @click="fanhui"
        src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
        v-show="titIndex != 3"
      />
      <!-- #endif -->
      <!-- #ifndef APP-PLUS -->
      <template v-if="beforePage != ''">
        <image
          class="image1"
          v-if="clarity <= 0.2"
          @click="fanhui"
          src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
        ></image>
        <image
          class="image1"
          v-else
          @click="fanhui"
          src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
        ></image>
      </template>
      <template v-else>
        <image
          class="image1"
          v-if="clarity <= 0.2"
          @click="shouye"
          src="https://pic.bangbangtongcheng.com/273355a6b7cd4bcb8b4cf8baf9a4ad9a"
        ></image>
        <image
          class="image1"
          v-else
          @click="shouye"
          src="https://pic.bangbangtongcheng.com/fc915aba003f4504a80d16c7a8c9b348"
        ></image>
      </template>
      <!-- <view @click="dianbi" :style="{color:clarity<=0.2?'#fff':'#000'}" class="dianbi">比</view> -->
      <!-- #endif -->
    </view>
    <!-- statusBarHeight1 -->
    <!-- :style="'padding-top:calc(' + statusBarHeight1 / 4 + 'px)'" -->
    <view class="tit">
      <view v-if="titIndex == 1" class="banner">
        <swiper
          style="min-height: 0rpx; height: 600rpx"
          class="screen-swiper square-dot"
          :circular="true"
          :autoplay="true"
          indicator-active-color="#ffffff"
          interval="5000"
          duration="500"
          :current="current"
          :indicator-dots="false"
          @change="swiperC1"
        >
          <swiper-item
            v-for="(item, index) in swiperList"
            :key="index + 'ss'"
            @click="clickImg(swiperList, index)"
          >
            <image style="margin-top: 0px !important" :src="imgUrl + item" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>
      <view v-if="titIndex == 2" class="banner">
        <swiper
          style="min-height: 0rpx; height: 600rpx"
          class="screen-swiper square-dot"
          :circular="true"
          :autoplay="true"
          indicator-active-color="#ffffff"
          interval="5000"
          duration="500"
          :current="current1"
          :indicator-dots="false"
          @change="swiperC2"
        >
          <swiper-item
            v-for="(item, index) in swiperList1"
            :key="index + 'dd'"
            @click="clickImg(swiperList1, index)"
          >
            <image style="margin-top: 0px !important" :src="imgUrl + item" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>
      <video
        v-if="titIndex == 3"
        class="video"
        :src="imgUrl + video"
        :poster="imgUrl + video + '?vframe/jpg/offset/0'"
      >
        <!-- <view class="video" v-show="false"
					style="z-index: 2; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width:100%;height:100%; background-color: rgba(0,0,0,0.2);">
					<image src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" mode="aspectFit"
						style="z-index: 1;position: relative;bottom: 0rpx;left: 0%;text-align: center;line-height: 45rpx;border-radius: 25px;">
					</image>
					<view class=""
						style="z-index: 3;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width:100rpx;height:100rpx; background-color: red;">

					</view>
				</view> -->

        <!-- <cover-view 
          style="width: 15%;height: 50rpx;background-color: #64b6a8;z-index: 1;position: absolute;bottom: 10rpx;left: 25%;text-align: center;line-height: 50rpx;">
          视频
        </cover-view> -->
        <!-- #ifdef APP-PLUS -->
        <!-- <cover-view class="new-title-wrapper">
					1111
				</cover-view> -->
        <!-- <image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" /> -->
        <cover-view
          @click="titxuan(1)"
          style="
            width: 15%;
            height: 50rpx;
            background-color: #ffffff;
            z-index: 1;
            position: absolute;
            bottom: 10rpx;
            left: 35%;
            text-align: center;
            line-height: 45rpx;
            border-radius: 25px;
          "
        >
          图片</cover-view
        >
        <cover-view
          @click="titxuan(2)"
          style="
            width: 15%;
            height: 50rpx;
            background-color: #ffffff;
            z-index: 1;
            position: absolute;
            bottom: 10rpx;
            left: 50%;
            text-align: center;
            line-height: 45rpx;
            border-radius: 25px;
          "
        >
          户型</cover-view
        >

        <!-- <view class="fenxiang" @click="Mores">更多</view>  -->
        <!-- <cover-view class="fenxiang" @click="Mores">更多</cover-view> -->
        <cover-view class="Wfanhui" @click="fanhui">
          <cover-image
            class="fanhui"
            @click.stop="fanhui"
            src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
          ></cover-image>
        </cover-view>

        <!-- #endif -->
        <!-- width: 50rpx;height: 50rpx;z-index: 1;position:fixed;top: 30px;left: 0px; -->
      </video>
      <view class="butbox">
        <view
          :class="titIndex == 3 ? 'but xuan' : 'but'"
          @click="titxuan(3)"
          v-if="video"
          style="margin-right: 10rpx"
          >视频</view
        >
        <view class="tu">
          <view :class="titIndex == 1 ? 'but xuan' : 'but'" @click="titxuan(1)">图片</view>
          <view
            v-if="swiperList1.length"
            :class="titIndex == 2 ? 'but xuan' : 'but'"
            @click="titxuan(2)"
            >户型
          </view>
        </view>
      </view>
      <view
        class="rotaryCastDiagram"
        style="background: rgba(51, 51, 51, 0.65); color: #fff"
        v-if="titIndex != 3"
      >
        {{ titIndex == 2 ? current1 + 1 : current + 1 }}/{{
          titIndex == 2 ? swiperList1.length : swiperList.length
        }}
      </view>
    </view>
    <view
      class=""
      @click.stop="informationNoBubbles = !informationNoBubbles"
      style="
        margin-top: 30rpx;
        margin-left: 30rpx;
        margin-bottom: 12rpx;
        color: #64b6a8;
        position: relative;
      "
    >
      信息编号：{{ data.id }}
      <view class="informationNoBubble" v-if="informationNoBubbles">
        <view class="binds_1"> 信息编号是唯一的信息身份号码，可在帮帮同城进行准确搜索查找。 </view>
        <view class="binds_2"> 联系发布人时可通过信息编号确认信息。 </view>
      </view>
    </view>
    <view class="title" style="min-height: 90rpx">
      <view class="name">{{ data.title || '' }}</view>
      <!-- <view class="jubao" @click="jubao">
				<image src="https://pic.bangbangtongcheng.com/static/jubao.png" />
				<view>举报</view>
			</view> -->
    </view>
    <view class="guige">
      <view class="qian" :style="!data.houseType ? 'width:360rpx' : ''">
        <text
          v-if="data.transactionType == 2"
          style="font-size: 40rpx; color: #ef0000; font-weight: 700"
          >{{ price }}万</text
        >
        <text v-else style="font-size: 40rpx; color: #ef0000; font-weight: 700"
          >{{ data.price || '' }}元</text
        >
        <view style="font-size: 24rpx; color: #999999" v-if="data.transactionType == 1"
          >月租金</view
        >
        <view style="font-size: 24rpx; color: #999999" v-if="data.transactionType == 2">售价</view>
      </view>
      <view class="hu" v-if="data.houseType">
        <text style="font-size: 40rpx; color: #ef0000; font-weight: 700">
          {{ data.houseType }}
        </text>
        <view style="font-size: 24rpx; color: #999999">户型</view>
      </view>
      <view class="mian" :style="!data.houseType ? 'width:360rpx' : ''">
        <text style="font-size: 40rpx; color: #ef0000; font-weight: 700"
          >{{ data.area || '' }}㎡</text
        >
        <view class="mianji" style="font-size: 24rpx; color: #999999">面积</view>
      </view>
    </view>
    <view class="xinxi">
      <view class="name">
        基础信息
        <!-- <image @click="contrast(true)" class="image" src="https://pic.bangbangtongcheng.com/static/DB.png"
					mode="scaleToFill" v-if="!contraststate" />
				<div @click="contrast(false)" v-else style="color: #64b6a8; font-size: 29rpx" class="image1">取消对比</div> -->
      </view>
      <view class="list">
        <!-- <view style="width: 345rpx" v-if="lcType == 1 && lou1.length">
          <text style="color: #999999">楼层：</text>
          {{ lou1 }}层/共{{ lou3 }}层
        </view>
        <view style="width: 345rpx" v-if="lcType == 2 && lou1.length">
          <text style="color: #999999">楼层：</text>
          {{ lou1 }}层-{{
          lou2
          }}层/共{{ lou3 }}层
        </view>
        <view style="width: 345rpx" v-if="lcType == 3 && lou3.length">
          <text style="color: #999999">楼层：</text>
          共{{ lou3 }}层
        </view> -->
        <view style="width: 345rpx" v-if="lou1.length">
          <text style="color: #999999">楼层：</text>
          {{ lou1 }}
        </view>
        <view style="width: 345rpx" v-if="data.transactionType == 2">
          <text style="color: #999999">单价：</text>
          {{ UnitPrice }}元/m²
        </view>
        <view style="width: 345rpx" v-if="data.transactionType == 2 && data.type != '1'">
          <text style="color: #999999">状态：</text>
          {{ data.useStatus == 1 ? '闲置中' : '经营中' }}
        </view>
        <view style="width: 345rpx" v-if="data.years">
          <text style="color: #999999">年代：</text>
          {{ data.years }}
        </view>
        <view style="width: 345rpx" v-if="data.orientation">
          <text style="color: #999999">朝向：</text>
          {{ data.orientation }}
        </view>
        <view style="width: 345rpx" v-if="data.housingYears">
          <text style="color: #999999">房屋年限：</text>
          {{ data.housingYears }}
        </view>
        <view style="width: 345rpx" v-if="data.propertyType">
          <text style="color: #999999">产权类型：</text>
          {{ data.propertyType }}
        </view>
        <view style="width: 345rpx" v-if="data.renovation">
          <text style="color: #999999">装修：</text>
          {{ data.renovation }}
        </view>
        <view style="width: 345rpx" v-if="data.elevator">
          <text style="color: #999999">电梯：</text>
          {{ data.elevator }}
        </view>
        <view style="width: 345rpx" v-if="data.rentalMode">
          <text style="color: #999999">出租方式：</text>
          {{ data.rentalMode }}
        </view>
        <view style="width: 345rpx" v-if="data.rentRoom">
          <text style="color: #999999">出租房间：</text>
          {{ data.rentRoom }}
        </view>
        <view style="width: 345rpx" v-if="data.paymentMethod">
          <text style="color: #999999">付款方式：</text>
          {{ data.paymentMethod }}
        </view>
        <view style="width: 345rpx" v-if="data.startRent">
          <text style="color: #999999">起租期：</text>
          {{ data.startRent }}个月起
        </view>
        <view style="width: 345rpx" v-if="data.area && data.type == 4">
          <text style="color: #999999">厂区面积：</text>
          {{ data.area }}m²
        </view>
        <view style="width: 345rpx" v-if="data.workshopArea && data.type == 4">
          <text style="color: #999999">车间面积：</text>
          {{ data.workshopArea }}m²
        </view>
        <view style="width: 345rpx" v-if="data.nature">
          <text style="color: #999999">性质：</text>
          {{ data.nature }}
        </view>
        <view style="width: 345rpx" v-if="limit">
          <text style="color: #999999">土地使用年限：</text>
          {{ limit }}年/共{{ limit1 }}年
        </view>
        <view style="width: 690rpx">
          <text style="color: #999999" v-if="data.cellName">小区：</text>
          <text style="color: #999999" v-else>位置：</text>
          {{ data.cellName || data.address }}
          <view>
            <image
              class="dingwei"
              @click="openMap"
              src="https://pic.bangbangtongcheng.com/static/bbcz/daohang_01.png"
            />
          </view>
        </view>
        <!-- <view class="zixun" v-if="lou1.length">
          咨询楼层
          <image src="https://pic.bangbangtongcheng.com/static/you.png" />
        </view>-->
      </view>
    </view>
    <view class="jieshao">
      <view class="name">房源介绍</view>
      <view
        class="detail"
        style="
          margin-left: 30rpx;
          width: 690rpx;
          font-size: 15px;

          line-height: 24px;
        "
        >{{ data.houseIntroduce }}</view
      >
    </view>
    <view class="jiaju" v-if="data.transactionType == 1 && data.type == 1">
      <!-- <view class="dianqi">房屋附属家具及电器</view> -->
      <view style="display: flex; flex-wrap: wrap; margin-top: 10px; margin-left: 20rpx">
        <view
          style="display: flex; align-items: center; margin-bottom: 40rpx; width: 240rpx"
          v-for="(item, index) in furnituresss"
          :key="index + 'qq'"
        >
          <!-- <view style="width: 24px;height:24px;border-radius: 24px;border: #64b6a8 1px solid;margin-right: 10rpx;"
            v-if="item.shown"></view> -->
          <text
            class="lg text-gray cuIcon-roundcheckfill"
            style="font-size: 20px; color: #64b6a8 !important; margin-right: 10rpx"
            v-if="item.shown"
          ></text>
          <!-- <i class="el-icon-success" style="color: #64B6A8;font-size: 28px;margin-right: 10px;" v-if="item.shown"></i> -->
          <text
            class="lg text-gray cuIcon-round"
            style="font-size: 20px; color: #c9c9c9 !important; margin-right: 10rpx"
            v-else
          ></text>
          <!-- <view style="width: 24px;height:24px;border-radius: 24px;border: #C9C9C9 1px solid;margin-right: 10rpx;"
            v-else> -->
          <!-- </view> -->
          <img style="width: 40px; height: 40px; margin-right: 6px" :src="item.imgurl" />
          <view style="font-size: 16px; color: #000">{{ item.valueName }}</view>
        </view>
      </view>
    </view>
    <view class="picjs">
      <image
        :class="fangfa ? 'fada' : ''"
        :src="imgUrl + item"
        v-for="(item, index) in swiperList"
        :key="index + 'ww'"
        mode="aspectFill"
        @click="clickImg(swiperList, index)"
      />
      <image
        :src="imgUrl + item"
        v-for="(item, index) in swiperList1"
        :key="index + 'ee'"
        mode="aspectFill"
        @click="clickImg(swiperList1, index)"
      />
    </view>
    <view class="disclaimer">
      {{ disclaimers }}
    </view>
    <informationNo ref="informationNo"></informationNo>
    <uniBall></uniBall>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '../../../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  // import { log } from "console";
  export default {
    data() {
      return {
        fangfa: false,
        playstate: true,
        titIndex: 1,
        swiperList: [],
        swiperList1: [],
        furnituresss: [],
        weig: false,
        id: '',
        imgUrl: this.$imgSrc,
        data: {},
        video: '',
        lcType: 0,
        lou1: '',
        current: 0,
        current1: 0,
        limit: '',
        limit1: '',
        jjrInfo: {},
        userInfo: uni.getStorageSync('Pduser'),
        Count: '',
        isCollection: '',
        userisCollection: '',
        contraststate: false,
        housetype: 1,
        beforePage: '',
        // 变色
        clarity: 0,
        capsuleWidth: 0,
        disclaimers: '',
        informationNoBubbles: false,
      }
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
      images(url) {
        let arr = url.split('')
        if (arr[0] == '/') {
          return this.imgUrl + url
        } else {
          return url
        }
      },
    },
    onPageScroll(e) {
      if (e.scrollTop <= 200) {
        this.clarity = (e.scrollTop / 200).toFixed(2)
        // if (this.clarity >= 0.2) {
        // 	uni.setNavigationBarColor({
        // 		frontColor:'#000000',
        // 		backgroundColor:'#ff0000'
        // 	})
        // }else{
        // 	uni.setNavigationBarColor({
        // 		frontColor:'#ffffff',
        // 		backgroundColor:'#ff0000'
        // 	})
        // }
      }
    },
    onLoad(options) {
      var than = this
      this.id = options.id
      this.Disclaimers()
      this.getcontrast()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
      /* #ifndef APP-PLUS */
      var pages = getCurrentPages() //当前页
      this.beforePage = pages[pages.length - 2].route //上个页面、
      /* #endif*/
    },
    onReady() {
      /* #ifdef MP-WEIXIN*/
      this.capsuleWidth = wx.getMenuButtonBoundingClientRect().width
      /* #endif */
    },
    // onReady() {
    // 	uni.setNavigationBarColor({
    // 		frontColor:'#ffffff',
    // 		backgroundColor:'#ff0000'
    // 	})
    // },
    onShow() {
      var than = this
      this.getData(true)
      setTimeout(function () {
        than.weig = false
      }, 3000)
    },
    methods: {
      // 信息编号
      informationNos() {
        this.$refs.informationNo.informationNo_xxbh()
      },
      // 免责声明
      Disclaimers() {
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: '4',
          })
          .then((res) => {
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      // fn() {
      //   console.log("11111");

      //   uni.showActionSheet({
      //     itemList: ["分享到微信好友", "分享到微信朋友圈"],
      //     success: res => {
      //       console.log(res);
      //       let wsxcene = null;
      //       if (res.tapIndex == 0) {
      //         wsxcene = "WXSceneSession";
      //       } else {
      //         wsxcene = "WXSceneTimeline";
      //       }
      //       uni.share({
      //         provider: "weixin",
      //         scene: wsxcene,
      //         type: 0,
      //         href:
      //           "https://www.bangbangtongcheng.com/conven_web/#/pages/housing/used/houseDetails?id=" +
      //           this.id,
      //         imageUrl: this.swiperList[0],
      //         summary: "我正在看，" + this.data.title + "赶紧跟我一起来查看！",
      //         success: function(res) {
      //           console.log("success:" + JSON.stringify(res));
      //         },
      //         fail: function(err) {
      //           console.log("fail:" + JSON.stringify(err));
      //         }
      //       });
      //     },
      //     fail: function(res) {
      //       console.log(res.errMsg);
      //     }
      //   });
      // },
      fn() {
        uni.showActionSheet({
          itemList: ['分享到微信好友', '分享到微信朋友圈'],
          success: (res) => {
            console.log(res)
            let wsxcene = null
            if (res.tapIndex == 0) {
              //分享到好友 可以发送小程序
              // uni.downloadFile({
              // 	url: this.data.displayDiagram || 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg', //仅为示例，并非真实的资源
              // 	success: (res) => {
              // 		if (res.statusCode === 200) {
              // 			let name=res.tempFilePath.substr(res.tempFilePath.lastIndexOf('/')+1); //截取文件名
              // 			plus.zip.compressImage({
              // 				 src: res.tempFilePath, //下载完图片的临时路径
              // 				 dst: '_doc/photoData/'+name, //存储压缩完图片的临时路径
              // 				 overwrite: true, //再次压缩会覆盖掉上次的目录
              // 				 width:'150px', //缩放图片的宽度
              // 				height:'100px', //缩放图片的高度
              // 				quality:5,  //压缩图片质量,值越低,图片占内存越低
              // 			},event => { //压缩成功
              // 			  wsxcene = "WXSceneSession";
              // 			  uni.share({
              // 			  	provider: "weixin",
              // 			  	scene: wsxcene,
              // 			  	type: 5,
              // 			  	title: this.data.title,
              // 			  	imageUrl:event.target,
              // 			  	miniProgram: {
              // 			  		id: 'gh_c8b17811efca',
              // 			  		path: "pages/housing/used/houseDetails?id=" + this.id,
              // 			  		type: 0,
              // 			  		webUrl: "https://www.bangbangtongcheng.com/conven_web/#/pages/housing/used/houseDetails?id=" +
              // 			  			this.id,
              // 			  	},
              // 			  	// summary: "我正在看，" + this.data.title + "赶紧跟我一起来查看！",
              // 			  	success: function(res) {
              // 			  		console.log("success:" + JSON.stringify(res));
              // 			  	},
              // 			  	fail: function(err) {
              // 			  		console.log("fail:" + JSON.stringify(err));
              // 			  	}
              // 			  });
              // 			},
              // 			error => { //压缩失败
              // 					uni.showToast({
              // 						title: "压缩失败",
              // 						icon: "none"
              // 					});
              // 			});
              // 		}
              // 	}
              // });
              wsxcene = 'WXSceneSession'
              uni.share({
                provider: 'weixin',
                scene: wsxcene,
                type: 5,
                title: this.data.title,
                imageUrl:
                  this.data.displayDiagram ||
                  'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg',
                miniProgram: {
                  id: 'gh_c8b17811efca',
                  path: 'pages_houses/housing/used/houseDetails?id=' + this.id,
                  type: 0,
                  webUrl:
                    'https://www.bangbangtongcheng.com/conven_web/#/pages_houses/housing/used/houseDetails?id=' +
                    this.id,
                },
                // summary: "我正在看，" + this.data.title + "赶紧跟我一起来查看！",
                success: function (res) {
                  console.log('success:' + JSON.stringify(res))
                },
                fail: function (err) {
                  console.log('fail:' + JSON.stringify(err))
                },
              })
            } else {
              uni.downloadFile({
                url: this.data.displayDiagram || this.swiperList[0], //仅为示例，并非真实的资源
                success: (res) => {
                  if (res.statusCode === 200) {
                    let name = res.tempFilePath.substr(res.tempFilePath.lastIndexOf('/') + 1) //截取文件名
                    plus.zip.compressImage(
                      {
                        src: res.tempFilePath, //下载完图片的临时路径
                        dst: '_doc/photoData/' + name, //存储压缩完图片的临时路径
                        overwrite: true, //再次压缩会覆盖掉上次的目录
                        width: '150px', //缩放图片的宽度
                        height: '100px', //缩放图片的高度
                        quality: 5, //压缩图片质量,值越低,图片占内存越低
                      },
                      (event) => {
                        //压缩成功
                        wsxcene = 'WXSceneTimeline' //分享到朋友圈 只能H5 或者图片
                        uni.share({
                          provider: 'weixin',
                          scene: wsxcene,
                          type: 0,
                          title: this.data.title,
                          href:
                            'https://www.bangbangtongcheng.com/conven_web/#/pages_houses/housing/used/houseDetails?id=' +
                            this.id,
                          imageUrl: event.target,
                          summary: '我正在看，' + this.data.title || ' ' + '赶紧跟我一起来查看！',
                          success: function (res) {
                            console.log('success:' + JSON.stringify(res))
                          },
                          fail: function (err) {
                            console.log('fail:' + JSON.stringify(err))
                          },
                        })
                      },
                      (error) => {
                        //压缩失败
                        uni.showToast({
                          title: '压缩失败',
                          icon: 'none',
                        })
                      }
                    )
                  }
                },
              })
              // wsxcene = "WXSceneTimeline"; //分享到朋友圈 只能H5 或者图片
              // uni.share({
              // 	provider: "weixin",
              // 	scene: wsxcene,
              // 	type: 0,
              // 	title: this.data.title,
              // 	href: "https://www.bangbangtongcheng.com/conven_web/#/pages/housing/used/houseDetails?id=" +
              // 		this.id,
              // 	imageUrl: this.data.displayDiagram+'?imageslim' || this.swiperList[0]+'?imageslim',
              // 	summary: "我正在看，" + this.data.title || ' ' + "赶紧跟我一起来查看！",
              // 	success: function(res) {
              // 		console.log("success:" + JSON.stringify(res));
              // 	},
              // 	fail: function(err) {
              // 		console.log("fail:" + JSON.stringify(err));
              // 	}
              // });
            }
          },
          fail: function (res) {
            console.log(res.errMsg)
          },
        })
      },
      //查询是否加入对了
      getcontrast() {
        let contrastList = uni.getStorageSync('contrast')
        if (contrastList) {
          this.contraststate = contrastList.some((v) => Number(v.id) === Number(this.id))
        }
      },
      titxuan(index) {
        this.titIndex = index
      },
      weigui() {
        uni.navigateTo({
          url: '/pages_intermediary/illegalBehavior?id=' + this.jjrInfo.id + '&index=1',
        })
      },
      // 点击比字触发的事件
      dianbi() {
        uni.navigateTo({
          url: '/pages_my/contrast',
        })
      },
      contrast(type) {
        // let contrast1 = uni.getStorageSync("contrast1");
        // let contrast2 = uni.getStorageSync("contrast2");
        // let contrast1 = uni.getStorageSync("contrast1");
        // let contrast2 = uni.getStorageSync("contrast2");
        // let contrastArr=[
        //   {contrast1:contrast1}
        // ]
        if (type) {
          let contrastList = []
          contrastList = uni.getStorageSync('contrast')
          if (contrastList.length >= 4) {
            uni.showToast({
              title: '最多只能添加4套房源进行对比，请先前往对比删除后再添加',
              icon: 'none',
            })
            return false
          }
          if (contrastList) {
            console.log('继续添加', contrastList)
            uni.showToast({
              title: '加入对比成功',
              icon: 'none',
            })
            contrastList.push(this.data)
            uni.setStorageSync('contrast', contrastList)
          } else {
            contrastList = []
            contrastList.push(this.data)
            uni.setStorageSync('contrast', contrastList)
          }
          // if (contrast1.id) {
          //   uni.setStorageSync("contrast2", this.data);
          //   uni.showToast({
          //     title: "加入对比成功",
          //     icon: "none",
          //   });
          // } else {
          //   uni.setStorageSync("contrast1", this.data);
          //   uni.showToast({
          //     title: "加入对比成功",
          //     icon: "none",
          //   });
          // }
        } else {
          let contrastList = uni.getStorageSync('contrast')
          for (var i = 0; i < contrastList.length; i++) {
            if (contrastList[i].id == this.id) {
              contrastList.splice(i, 1)
              uni.setStorageSync('contrast', contrastList)
              this.contraststate = false
              uni.showToast({
                title: '取消对比成功',
                icon: 'none',
              })
            }
          }
          // if (contrast1.id == this.id) {
          //   uni.removeStorageSync("contrast1");
          //   uni.showToast({
          //     title: "取消对比成功",
          //     icon: "none",
          //   });
          // } else if (contrast2.id == this.id) {
          //   uni.removeStorageSync("contrast2");
          //   uni.showToast({
          //     title: "取消对比成功",
          //     icon: "none",
          //   });
          // }
        }
        this.getcontrast()
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.setWxShare(re.data)
          },
        })
      },
      setWxShare(data) {
        let _this = this
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'openLocation'],
        })
        wxshare.ready(function () {
          //分享给朋友
          // console.log("aaaaaaaa");
          wxshare.updateAppMessageShareData({
            title: _this.data.title, // 分享标题
            desc: _this.data.address, // 分享描述
            link: `https://www.bangbangtongcheng.com/conven_web/#/pages_houses/housing/used/houseDetails?id=${_this.id}`, // 当前页面链接pp
            imgUrl: 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg', // 分享图标
            success: function () {
              //分享成功回调
            },
            cancel: function () {
              //取消分享回调
            },
          })
          wxshare.updateTimelineShareData({
            title: _this.data.title, // 分享标题
            desc: _this.data.address, // 分享描述
            link: `https://www.bangbangtongcheng.com/conven_web/#/pages_houses/housing/used/houseDetails?id=${_this.id}`, // 当前页面链接pp
            imgUrl: 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg', // 分享图标
            success: function () {},
            cancel: function () {},
          })
        })
      },
      onShareAppMessage: function (res) {
        let that = this
        // console.log(that.imgUrl + that.data.logo);
        if (res.from === 'menu') {
          // 来自页面内分享按钮
          // console.log(res);
        }
        return {
          title: _this.data.title,
          path: '/pages_houses/housing/used/houseDetails?id=' + this.id,
          desc: '找房就用帮帮同城',
          imageUrl: 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg',
        }
      },
      onShareTimeline() {
        return {
          title: _this.data.title,
          path: '/pages_houses/housing/used/houseDetails?id=' + this.id,
          imageUrl: 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg',
        }
      },
      // jinzhifx(data) {
      //   wxshare.config({
      //     debug: false, //是否打开调试
      //     appId: data.appId, // 公众号的唯一标识
      //     timestamp: data.timestamp, // 生成签名的时间戳
      //     nonceStr: data.nonce, // ，生成签名的随机串
      //     signature: data.signature, // 签名
      //     jsApiList: ["hideMenuItems"]
      //   });
      //   // 禁止分享
      //   wxshare.hideMenuItems({
      //     // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
      //     menuList: [
      //       "menuItem:share:appMessage",
      //       "menuItem:share:timeline",
      //       "menuItem:share:timeline",
      //       "menuItem:share:qq",
      //       "menuItem:favorite",
      //       "menuItem:share:QZone",
      //       "menuItem:openWithSafari"
      //     ]
      //   });
      // },
      chat() {
        // if (!this.userInfo.phone) {
        //   uni.showModal({
        //     title: "",
        //     content: "尚未登录，前往登录？",
        //     showCancel: true,
        //     success: (res) => {
        //       if (res.confirm) {
        //         uni.navigateTo({ url: "/pages/login/login" });
        //       }
        //     },
        //   });
        //   return;
        // }
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: `/pages/news/chat1?receiver=${this.jjrInfo.id}&img=${this.jjrInfo.image}&nikeName=${
            this.jjrInfo.userName || this.jjrInfo.nikeName
          }&id=${this.data.id}`,
        })
      },
      jubao() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: '/pages_houses/housing/informer?id=' + this.jjrInfo.id + '&houseId=' + this.id,
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      shouye() {
        uni.switchTab({
          url: '/pages/index/index',
        })
      },
      userFy() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: '/pages_owner/dealer/goldConsultant?userId=' + this.jjrInfo.id,
        })
      },
      openMap() {
        // console.log(this.data.latitude, this.data.longitude);
        let that = this
        /* #ifdef H5 */
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            uni.hideLoading()
            wxshare.config({
              debug: false, //是否打开调试
              appId: re.data.appId, // 公众号的唯一标识
              timestamp: re.data.timestamp, // 生成签名的时间戳
              nonceStr: re.data.nonce, // ，生成签名的随机串
              signature: re.data.signature, // 签名
              jsApiList: ['openLocation'],
            })
            wxshare.ready(function () {
              wxshare.openLocation({
                latitude: Number(that.data.latitude), //目的地latitude
                longitude: Number(that.data.longitude), //目的地longitude
                name: that.data.title,
                address: that.data.address,
                scale: 15, //地图缩放大小，可根据情况具体调整
              })
            })
          },
        })
        /* #endif */
        /* #ifndef H5 */
        uni.openLocation({
          latitude: Number(that.data.latitude),
          longitude: Number(that.data.longitude),
          name: that.data.address,
          success: function () {
            console.log('success')
          },
        })
        /* #endif */
      },
      ll() {
        if (!this.userInfo.phone) {
          return
        }
        let that = this
        this.$myRequest
          .post('/mob/user/saveUserCollection', {
            userId: this.userInfo.id,
            type: '2',
            cbType: '1',
            relationId: this.id,
          })
          .then((res) => {})
      },
      sc() {
        if (!this.userInfo.phone) {
          // uni.showToast({
          //   title: "请登录",
          //   icon: "none",
          //   mask: true,
          // });
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        let that = this
        this.$myRequest
          .post('/mob/user/saveUserCollection', {
            userId: this.userInfo.id,
            type: '1',
            cbType: '1',
            relationId: this.data.id,
            cancel: this.isCollection ? '1' : '',
          })
          .then((res) => {
            uni.showToast({
              title: '收藏成功',
              icon: 'none',
              mask: true,
            })
            this.getData()
          })
      },
      guanzhu() {
        if (!this.userInfo.phone) {
          // uni.showToast({
          //   title: "请登录",
          //   icon: "none",
          //   mask: true,
          // });
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        let that = this
        this.$myRequest
          .post('/mob/user/saveUserCollection', {
            userId: this.userInfo.id,
            type: '1',
            cbType: '3',
            relationId: this.jjrInfo.id,
            cancel: this.userisCollection ? '1' : '',
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true,
            })
            this.getData()
          })
      },
      getjjr(id) {
        let that = this
        this.$myRequest
          .get('/mob/user/getUserInfoByUserId', {
            id,
          })
          .then((res) => {
            this.jjrInfo = res.userInfo
          })
      },

      async getPhone() {
        this.onphone()
      },
      onphone() {
        if (!this.userInfo.phone) {
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        this.$myRequest
          .post('/mob/user/call', {
            userId: this.jjrInfo.userId,
            telephoneNumber: this.jjrInfo.phone,
            associationId: this.data.id,
            type: '1',
          })
          .then((res) => {})
        uni.makePhoneCall({
          // 手机号
          phoneNumber: this.jjrInfo.phone,
          // 成功回调
          success: (res) => {
            console.log('调用成功!')
          },

          // 失败回调
          fail: (res) => {
            console.log('调用失败!')
          },
        })
      },
      getCollection(id) {
        if (!this.userInfo.phone) {
          return
        }
        this.$myRequest
          .get('/mob/user/getIsCollection', {
            userId: this.userInfo.id,
            cbType: 3,
            type: 1,
            relationId: id,
          })
          .then((res) => {
            // console.log(res);
            this.userisCollection = res.isCollection
          })
      },
      fangd() {
        console.log(0)
        this.fangfa = !this.fangfa
      },
      clickImg(url, index) {
        url = url.map((v) => {
          v = this.imgUrl + v
          return v
        })
        wx.previewImage({
          urls: url, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: index, // 当前显示图片的http链接，默认是第一个
          indicator: 'number',
          success: function (res) {},
          fail: function (res) {},
          complete: function (res) {},
        })
      },
      getData(status) {
        let that = this
        this.$myRequest
          .get('/mob/home/getHouseInfoDetail', {
            id: this.id,
            userId: this.userInfo.id || '',
          })
          .then((res) => {
            this.data = res.tHouseInfo
            this.swiperList = res.tHouseInfo.houseImage.split('|')
            if (res.tHouseInfo.houseTypeImage) {
              this.swiperList1 = res.tHouseInfo.houseTypeImage.split('|')
            }
            res.userInfo.scoreAvg = res.scoreAvg

            this.jjrInfo = res.userInfo
            if (!this.jjrInfo.image) {
              this.jjrInfo.image = ''
            }
            if (!this.jjrInfo.nikeName) {
              this.jjrInfo.nikeName = ''
            }
            if (status) {
              that.getCount(res.tHouseInfo.userId)
            }
            that.getCollection(res.tHouseInfo.userId)

            this.isCollection = res.isCollection
            this.video = res.tHouseInfo.houseVideo

            if (res.tHouseInfo.floor) {
              if (res.tHouseInfo.floor.indexOf('|') == -1) {
                this.lou1 = ''
                // let floor = res.tHouseInfo.floor.split(",");
                // that.lcType = floor[0];
                // if (floor[0] == 1) {
                //   that.lou1 = floor[1];
                //   that.lou3 = floor[2];
                // } else if (floor[0] == 2) {
                //   that.lou1 = floor[1];
                //   that.lou2 = floor[2];
                //   that.lou3 = floor[3];
                // } else if (floor[0] == 3) {
                //   that.lou3 = floor[1];
                // }
                return
                if (res.tHouseInfo.floor.indexOf(',') == -1) {
                  this.lou1 = ''
                } else {
                  this.lou1 =
                    res.tHouseInfo.floor.split(',')[0] +
                    '层/' +
                    '共' +
                    res.tHouseInfo.floor.split(',')[1] +
                    '层'
                }
              } else {
                this.lou1 =
                  res.tHouseInfo.floor.split('|')[0] +
                  '层/' +
                  '共' +
                  res.tHouseInfo.floor.split('|')[1] +
                  '层'
              }
            }
            // console.log(that.lcType, that.lou3, 111111111111111111);
            if ([1, 4, 5, 6].indexOf(Number(res.tHouseInfo.type)) != -1) {
              // this.manageImg(data.tHouseInfo.houseTypeImage).forEach(e => {
              // 	this.previewList.push(e)
              // 	this.ImgList.push({
              // 		type: 'houseImgList',
              // 		url: this.$img + e
              // 	})
              // });
              // this.houseImgList = this.manageImg(data.tHouseInfo.houseTypeImage)
              this.getDictionaries(res.tHouseInfo.furniture)
            }

            if (res.tHouseInfo.useTerm) {
              let useTerm = res.tHouseInfo.useTerm.split(',')
              that.limit = useTerm[0]
              that.limit1 = useTerm[1]
            }
            this.housetype = Number(res.tHouseInfo.type)
          })
      },
      getDictionaries(furniture) {
        this.$myRequest
          .get('/mob/home/getDictionaries', {
            type: '5',
          })
          .then((data) => {
            if (data.code == 200) {
              //处理房源的电器
              var furnitures = furniture.split(',')
              let xuanfurniture = []
              data.list.forEach((e1) => {
                let dian = {}
                dian.imgurl = e1.image
                dian.valueName = e1.valueName
                dian.shown = false
                furnitures.forEach((e2) => {
                  if (e1.valueName == e2) {
                    dian.shown = true
                  }
                })
                xuanfurniture.push(dian)
              })
              this.furnituresss = xuanfurniture
            }
          })
      },
      getCount(id) {
        let that = this
        this.$myRequest
          .get('/mob/user/getReportMyRecord', {
            userId: id,
            businessType: 1,
          })
          .then((res) => {
            console.log(res)
            this.Count = res.page.count
            if (this.Count > 0) {
              that.weig = true
            }
          })
      },
      swiperC2(e) {
        this.current1 = e.detail.current
      },
      swiperC1(e) {
        this.current = e.detail.current
      },
      //点击更多按钮
      Mores() {
        let that = this
        uni.showActionSheet({
          itemList: ['转发', '对比'],
          success: function (res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮')
            if (res.tapIndex + 1 == 1) {
              that.fn()
            } else {
              that.dianbi()
            }
          },
          fail: function (res) {
            console.log(res.errMsg)
          },
        })
      },
    },
    computed: {
      price() {
        return this.data.price
      },
      UnitPrice() {
        return ((this.data.price * 10000) / this.data.area).toFixed(2)
      },
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1']),
    },
  }
</script>
<style lang="less" scoped>
  .new-title-wrapper {
    background-color: red;
    width: 100%;
    height: 88rpx;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
  }

  .headTop {
    width: 100%;
    height: 88rpx;
    position: fixed;
    top: 0;
    z-index: 100000;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding:0 40rpx;
    // padding-top: 4%;
    /* #ifdef MP-WEIXIN */
    // height: 120rpx;
    // padding-top: 10%;
    /* #endif */
    .image1 {
      width: 50rpx;
      height: 50rpx;
      margin-top: 0;
      margin: 0 20rpx;
    }
    .image2 {
    }
    .dianbi {
      font-size: 34rpx;
    }
    .fenxiang {
      font-size: 34rpx;
    }
  }
  .anamorphism {
    background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.4), rgba(255, 255, 255, 0));
  }
  .box {
    width: 100%;
    padding-bottom: 20rpx;
    background-color: #fff;
    // margin-top: 4%;
    /* #ifdef MP-WEIXIN */
    // margin-top: 5%;
    margin-top: 0 !important;

    /* #endif */
    .fenxiang {
      width: 50px;

      height: 50rpx;
      background-color: rgb(127, 127, 127);
      color: #fff;
      border-radius: 10%;
      line-height: 50rpx;
      text-align: center;
      position: fixed;
      font-size: 12px;

      top: 6%;
      // right: 10%;
      right: 5%;
      z-index: 10000000 !important;
      /* #ifdef APP */
      line-height: 40rpx;
      /* #endif */
    }
    .Wfanhui {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000000 !important;
      position: fixed;
      top: 4.5%;
      // left: 15px;
      .fanhui {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50rpx;
        background-color: #64b6a8;
      }
    }
  }

  .dibu {
    position: fixed;
    bottom: -2rpx;
    margin-top: 36rpx;
    width: 100%;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);

    .zhiwei {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 240rpx;
      position: absolute;
      // top: rpx;
      left: 30rpx;
      font-size: 28rpx;
      vertical-align: middle;

      .xin {
        // display: flex;
        height: 100rpx;
        width: 100rpx;
        position: fixed;
        bottom: -2%;
        left: 15%;

        .img3 {
          width: 20rpx;
          height: 20rpx;
        }
      }

      .img {
        vertical-align: middle;
        width: 80rpx;
        height: 80rpx;
        margin-right: 12rpx;
        border-radius: 80rpx;
      }
    }

    .shou {
      position: absolute;

      left: 250rpx;
      font-size: 24rpx;
      width: 120rpx;
      text-align: center;

      .img {
        vertical-align: middle;
        width: 54rpx;
        height: 54rpx;
        // margin-left: 24rpx;
      }
    }

    .lian {
      position: absolute;
      left: 400rpx;
      font-size: 24rpx;

      .img {
        vertical-align: middle;
        width: 54rpx;
        height: 54rpx;
        margin-left: 12rpx;
      }
    }

    .liao {
      position: absolute;
      top: 35rpx;
      right: 22rpx;
      width: 200rpx;
      height: 70rpx;
      background: #64b6a8;
      border-radius: 36rpx;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
    }

    .weigui {
      position: absolute;
      padding: 0px 10px 0px 10px;
      width: 690rpx;
      left: 30rpx;
      bottom: 0rpx;
      animation: all 6s;
      animation-name: mycolor;

      // mycolor 2s linear 3s infinite alternate
      .img {
        width: 100%;
        height: 134rpx;
      }

      p {
        position: absolute;
        left: 100rpx;
        bottom: 64rpx;
        font-size: 34rpx;
        color: #fff;
      }
    }

    @keyframes mycolor {
      0% {
        left: 30rpx;
        bottom: 140rpx;
        transform: scale(0 0.1);
      }

      100% {
        left: 30rpx;
        bottom: 140rpx;
        opacity: 0;
      }
    }
  }

  .mingpian {
    position: relative;
    width: 690rpx;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
    border-radius: 18rpx;
    margin-top: 40rpx;
    margin-left: 30rpx;

    .name {
      position: absolute;
      top: 50rpx;
      left: 174rpx;
      font-size: 36rpx;
      width: 300rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .img1 {
      position: absolute;
      top: 10%;
      left: 30rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .img2 {
      position: absolute;
      bottom: 40rpx;
      left: 40rpx;
      width: 100rpx;
      height: 36rpx;
      background: url('https://pic.bangbangtongcheng.com/static/name.png');
      background-size: 100% 100%;
      font-size: 20rpx;
      color: #fff;
      text-align: center;
      line-height: 36rpx;
    }

    .zhiwei {
      position: absolute;
      top: 132rpx;
      left: 54rpx;
      font-size: 20rpx;
      color: #fff;
    }

    .xin {
      position: absolute;
      top: 102rpx;
      left: 170rpx;

      .img3 {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .chakan {
      position: absolute;
      top: 0;
      right: 0;
      width: 200rpx;
      height: 60rpx;
      background: #64b6a8;
      border-radius: 0px 18rpx 0px 18rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
      font-size: 24rpx;
    }

    .img4 {
      position: absolute;
      top: 100rpx;
      left: 530rpx;
      width: 54rpx;
      height: 54rpx;
    }

    .guan {
      position: absolute;
      bottom: 37rpx;
      right: 40rpx;
    }
  }

  .jieshao {
    border-top: 20rpx solid #f2f2f2;
    width: 100%;
    margin-top: 20rpx;

    .name {
      font-size: 34rpx;
      color: #333333;
      margin-top: 30rpx;
      margin-left: 30rpx;
    }

    .detail {
      word-break: break-all;
      padding-top: 40rpx;
    }
  }

  .disclaimer {
    border-top: 20rpx solid #f2f2f2;
    width: 100%;
    margin-top: 20rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    font-size: 26rpx;
    color: #a19898;
    // margin-left:50rpx;
    word-break: break-all;
    margin-top: 16rpx;
  }

  image {
    width: 100%;
    margin-top: 10px;
  }

  .xinxi {
    position: relative;
    width: 690rpx;
    margin-top: 50rpx;
    margin-left: 30rpx;
    border-top: 2rpx solid #d0d0d0;

    .name {
      font-size: 34rpx;
      color: #333333;
      margin-top: 40rpx;
      position: relative;

      .image {
        position: absolute;
        top: 20%;
        transform: translateY(-50%);
        right: 0;
        width: 156rpx;
        height: 58rpx;
        line-height: 58rpx;
      }

      .image1 {
        position: absolute;
        top: 5%;
        right: 0rpx;
        width: 156rpx;
        height: 58rpx;
        line-height: 58rpx;
        text-align: center;
      }
    }

    .list {
      width: 100%;
      margin-top: 20rpx;

      view {
        display: inline-block;
        position: relative;
        margin-bottom: 10rpx;

        .dingwei {
          width: 40rpx;
          height: 40rpx;
          vertical-align: middle;
          // margin-left: 20rpx;
          margin-bottom: 20rpx;
        }
      }

      .zixun {
        position: absolute;
        top: 110rpx;
        right: 30rpx;
        line-height: 20rpx;
        color: #349a88;

        image {
          position: absolute;
          top: 0rpx;
          width: 12rpx;
          height: 24rpx;
          margin-left: 20rpx;
        }
      }
    }
  }

  .guige {
    // width: 100%;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    view {
      // display: inline-block;
    }

    .qian {
      padding-left: 30rpx;
      width: 240rpx;
      height: 70rpx;
      line-height: 36rpx;
      border-right: 2rpx solid #d0d0d0;
    }

    .hu {
      padding-left: 20rpx;
      width: 240rpx;
      height: 70rpx;
      line-height: 36rpx;
      border-right: 2rpx solid #d0d0d0;
    }

    .mian {
      padding-left: 50rpx;
      width: 240rpx;
      height: 70rpx;
      line-height: 36rpx;

      .mianji {
        margin-left: 10rpx;
      }
    }
  }

  .title {
    position: relative;
    // margin-top: 40rpx;
    margin-left: 30rpx;

    .name {
      width: 426rpx;
      font-size: 34rpx;
      font-weight: 600;
      line-height: 48rpx;
    }

    .jubao {
      position: absolute;
      top: -20rpx;
      right: 60rpx;

      image {
        width: 58rpx;
        height: 58rpx;
      }

      view {
        text-align: center;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }

  .tit {
    position: relative;
    width: 100%;
    height: 600rpx;
    /* #ifdef APP-PLUS */
    height: auto;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    height: auto;
    /* #endif */

    video {
      width: 100%;
      height: 600rpx;
      max-width: 100%;
    }

    .video {
      width: 100%;
      height: 600rpx;
      max-width: 100%;
      position: relative;
    }

    .butbox {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 40rpx;
      z-index: 99999;

      .tu {
        display: inline-block;
        // width: 200rpx;
        height: 50rpx;
        border-radius: 30rpx;
        background: #ffffff;
        // margin-left: 24rpx;
        // margin-right: 180rpx;
      }

      .but {
        display: inline-block;
        text-align: center;
        line-height: 52rpx;
        width: 100rpx;
        height: 50rpx;
        background: #ffffff;
        border-radius: 30rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
    .rotaryCastDiagram {
      position: absolute;
      right: 20rpx;
      bottom: 40rpx;
      display: inline-block;
      text-align: center;
      line-height: 52rpx;
      width: 100rpx;
      height: 50rpx;
      background: #ffffff;
      border-radius: 30rpx;
    }
  }
  .tit {
    .image1 {
      position: fixed;
      width: 50rpx;
      height: 50rpx;
      top: 40rpx;
      left: 0;

      background-color: rgb(127, 127, 127);
      border-radius: 50%;
      left: 30rpx;
      z-index: 10001;
    }
  }
  .tou {
    position: absolute;
    top: 0;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    z-index: 9999;

    .image1 {
      // position: absolute;
      position: fixed;
      width: 50rpx;
      height: 50rpx;
      top: 40rpx;
      left: 0;
      // top: 116rpx;
      // margin-bottom: 10px;
      background-color: rgb(127, 127, 127);
      border-radius: 50%;
      left: 30rpx;
      z-index: 1001;

      /* #ifdef MP-WEIXIN */
      width: 50rpx;
      height: 50rpx;
      top: 78rpx;
      /* #endif */
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      right: 30rpx;
    }

    .dianbi {
      width: 30px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-radius: 50%;
      line-height: 30px;
      position: fixed;
      font-size: 12px;
      top: 4%;
      /* #ifdef MP-WEIXIN */
      top: 10%;
      /* #endif */
      right: 0%;
      z-index: 10000000;
    }
  }
  .informationNoBubble {
    width: 500rpx;
    padding: 10rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
    position: absolute;
    bottom: -150rpx;
    border: 1px solid #888;
    left: 150rpx;
    z-index: 1;
    .binds_1 {
      font-size: 24rpx;
      font-weight: 400;
      color: #333333;
      margin-bottom: 10rpx;
    }
    .binds_2 {
      font-size: 24rpx;
      font-weight: 400;
      color: #64b6a8;
    }
    &::before {
      width: 0px;
      height: 0px;
      position: absolute;
      padding: 0;
      border-left: 24rpx solid transparent;
      border-right: 20rpx solid transparent;
      border-bottom: 24rpx solid #fff;
      content: '';
      z-index: 12;
      position: absolute;
      left: 12rpx;
      top: -20rpx;
    }
    &::after {
      width: 0px;
      height: 0px;
      position: absolute;
      padding: 0;
      border-left: 24rpx solid transparent;
      border-right: 20rpx solid transparent;
      border-bottom: 24rpx solid #888;
      content: '';
      z-index: 10;
      position: absolute;
      left: 12rpx;
      top: -24rpx;
    }
  }
  .picjs {
    image {
      width: 100%;
      max-height: 400rpx;
    }
  }
</style>
